import React, { useState, useEffect} from 'react'
import {useHistory } from 'react-router-dom'
import { ClassifyList } from '../../utils/interface'
import { getRankCategoryList } from '../../server/classify'
import './classify.scss'

const Classify: React.FC = () => {
  let [classNav, setclassNav] = useState<ClassifyList[]>([])
  let [carIndex, setCarindex] = useState<number>(0)
  let history  = useHistory()
  useEffect(() => {
    getRankCategoryList().then(res => {
      setclassNav(res.data.dataList)
    })
  }, [])
  //点击事件
  function clickNav(e:React.MouseEvent<HTMLElement,globalThis.MouseEvent>) {
    if (e.target !== e.currentTarget) {
      let num = parseInt((e.target as HTMLElement).dataset.index || '0')
      setCarindex(num)
      let scl = document.querySelector(".classCon")
      let arr = document.querySelectorAll(".classCon h1")
        if (num) {
          (scl as Element).scrollTop=(arr[num] as any).offsetTop-10
       }else {
             (scl as Element).scrollTop=0
         }
      console.log( (scl as Element).scrollTop)
    }
  }
  //滚动事件
  function sss(e:React.UIEvent<HTMLDivElement, UIEvent>) {
    let scl = (document.querySelector(".classCon") as Element).scrollTop
    let arr=document.querySelectorAll('h1')
    arr.forEach((item,index)=>{
        if(scl>=item.offsetTop-10){
          setCarindex(index)
        }
    })
  }
  //点击跳转搜索页
  function goSearch(e:React.MouseEvent) {
    if (e.target !== e.currentTarget) {
      history.push("/search")
    }
  }
  //点击跳转详情页
  function tiao(e) {
    if (e.target !== e.currentTarget) {
      let id=e.target.dataset.id
      history.push({
        pathname: "/mydetail",
        state: {
          id:id
        }
      })
    }
  }
  return (
    <div className="classify">
      <section className="search" onClick={goSearch}>
            <span>搜索你想知道的一切排名~</span>
        </section>
      <div className="classify_con">
        <div className="classLeft" onClick={clickNav}>
          {
            classNav.map((item, index) => {
              return (
                <div key={item.name} className={carIndex === index ? 'active' : ''} data-index={index}>{item.name}</div>
              )
            })
          }
        </div>
      <div className="classCon" onScroll={sss} onClick={tiao}>
        {
          classNav.map((item, index) => {
            return (
              <div key={index} >
                <h1 className="item_tit">{item.name}</h1>
                <div className="items">
                  {
                    item.rankList.map((items, i) => {
                      return (
                        <div key={i}>
                          <img src={items.image} alt="" data-id={items.id} />
                          <div data-id={items.id}>{items.name}</div>
                        </div>
                      )
                    })
                  }
                </div>
              </div>

            )
          })
        }
      </div>
      </div>
    </div>
  )
}
export default Classify